<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="file" id="file">
    <script>
        // 请求封装
        // 1. http 并发 blob 上传 chunk    / POST
        // 2. 当blob Promise.All 再发送一个merge的请求  /merge
        function request({
            url,
            method = 'POST',
            data,
            headers = {},
            requestList //   上传的文件列表
        }) {
            return new Promise(resolve => {
                const xhr = new XMLHttpRequest(); // js ajax 对象
                xhr.open(method, url); // 请求
                Object.keys(headers).forEach(key =>
                    xhr.setRequestHeader(key, headers[key]) // 请求加头
                );
                xhr.send(data);
                xhr.onload = e => {
                    resolve({
                        data: e.target.response
                    });
                }
            });
        }

        const mergeRequest = async() => {
            await request({
                url: 'http://localhost:3001/merge',
                headers: {
                    "content-type": "application/json"
                }
            });
            alert('上传成功');
        }

        document
            .getElementById('file')
            .addEventListener('change', async(event) => {
                const file = event.target.files[0]; //es6 文件对象
                console.log(file);
                const file_name = file.name.split('.')[0];
                //console.log(Object.prototype.toString.call(file));//[object File]
                //console.log(Object.prototype.toString.call(file.slice(0, 102400))); //array slice 
                let cur = 0,
                    size = 0.5 * 1024 * 1024; //1M
                const fileChunkList = []; //blob 数组
                while (cur < file.size) {
                    fileChunkList.push({
                        // cur start offset  end 
                        file: file.slice(cur, cur + size)
                    });
                    cur += size;
                }
                // console.log(fileChunkList);
                const requestList = fileChunkList
                    .map(({
                        file
                    }, index) => {
                        const formData = new FormData(); // js post form
                        formData.append("chunk", file);
                        formData.append("filename", `${file_name}-${index}`);
                        return {
                            formData
                        };
                    })
                    .map(async({
                        formData
                    }) => request({
                        url: 'http://localhost:3000', //前后端的api
                        data: formData
                    }))
                await Promise.all(requestList); //并发吧....
                // console.log(requestList)
                await mergeRequest();
            })
    </script>
</body>

</html>